import React, { Component } from 'react'
import { Card, Tabs, Input, DatePicker, Menu, Dropdown} from 'antd'
import './index.less'
export default class Newmedical extends Component {
  state = {
    isShow: true,
    iszhen: '初诊'
  }
  onC = ({ key }) => {
    console.log(key)
    if (key === '0') {
      this.setState ({
        iszhen: '初诊'
      })
    } else if (key === '1') {
      this.setState({
        iszhen: '复诊'
      })
    }
  }
  menu = (
    <Menu>
      <Menu.Item key="0" onClick={this.onC}>
        <div>初诊</div>
      </Menu.Item>
      <Menu.Item key="1" onClick={this.onC}>
        <div>复诊</div>
      </Menu.Item>
    </Menu>
  )
  callback(key) {
    console.log(key)
  }
  onChange(date, dateString) {
    console.log(date, dateString);
  }
  onSearch = value => console.log(value);
  // 绘制菜单
  _renderMenu = (items) => {
    return (
      <Card style={{width:'100%',height:500,borderRadius:'10px'}}>
        <Tabs defaultActiveKey="1" onChange={this.callback}>
          <Tabs.TabPane tab="处方" key="1">
            <div style={{display:'flex',justifyContent:'space-around'}}>
              <div style={{width:250}}>
                <p>患者姓名</p>
                <Input.Search placeholder="input search text" onSearch={this.onSearch} enterButton />
              </div>
              <div style={{width:250}}>
                <p>患者卡号</p>
                <Input />
              </div>
              <div style={{width:250}}>
                <p>患者年龄</p>
                <Input />
              </div>
              <div style={{width:250}}>
                <p>患者出生日期</p>
                <DatePicker onChange={this.onChange} />
              </div>
            </div>
            <div style={{display:'flex',justifyContent:'space-around'}}>
              <div style={{width:250}}>
                <p>性别</p>
                <Input/>
              </div>
              <div style={{width:250}}>
                <p>手机号</p>
                <Input/>
              </div>
              <div style={{width:250}}>
                <p>证件号码</p>
                <Input/>
              </div>
              <div style={{width:250}}>
                <p>接诊类型</p>
                <Dropdown overlay={this.menu} trigger={['click']}> 
                  <Input value={this.state.iszhen}/>
                </Dropdown>,
              </div>
            </div>
          </Tabs.TabPane>
          <Tabs.TabPane tab="病例" key="2">
            病例
          </Tabs.TabPane>
        </Tabs>
        
      </Card>
    )
  }
  render() {
    return (
      <div>
        {
          this._renderMenu()
        }
      </div>
    )
  }
}
